<template>
  <div style="width: 100%">
    <div ref="chartContainer" :style="{ width: width, height: height }" />
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, ref, watch, nextTick } from "vue";
import * as echarts from "echarts";
import { reactive } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

const chartContainer = ref(Math.random().toString(36).slice(2, 10));
// const echartsRef = ref < string > Math.random().toString(36).slice(2, 10);
let chartInstance = null;
const props = defineProps({
  width: {
    type: String,
    default: ""
  },
  height: {
    type: String,
    default: ""
  },
  option: {
    type: Object,
    required: true
  },
  type: {
    type: String,
    default: ""
  }
});
const legendDoms = ref(null);
onMounted(() => {
  setTimeout(() => {
    initChart();
  }, 100);
  window.addEventListener("resize", handelResize);
});
const handelResize = () => {
  if (chartInstance) {
    chartInstance.resize();
  }
};
nextTick(() => {
  initChart();
});
const initChart = () => {
  if (chartContainer.value) {
    if (props.type == "dark") {
      chartInstance = echarts.init(chartContainer.value, "dark");
      const lendom = legendDoms.value;
      chartInstance.setOption(props.option);
    } else {
      chartInstance = echarts.init(chartContainer.value);
      const lendom = legendDoms.value;
      chartInstance.setOption(props.option);
    }
    //获取新的时间
    let date = new Date();
    //获取当前时间的年份转为字符串
    let year = date.getFullYear().toString();
    //获取月份，由于月份从0开始，此处要加1，判断是否小于10，如果是在字符串前面拼接'0'
    let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1).toString() : (date.getMonth() + 1).toString();
    //获取天，判断是否小于10，如果是在字符串前面拼接'0'
    let day = date.getDate() < 10 ? "0" + date.getDate().toString() : date.getDate().toString();
    chartInstance.on("click", params => {
      if (params.name == "运行") {
        router.push({
          path: `/all/equip/runManage/record`,
          query: {
            className: "MACHINE",
            eqpRunStatus: "1"
          }
        });
      }
      if (params.name == "故障") {
        router.push({
          path: `/all/equip/runManage/record`,
          query: {
            className: "MACHINE",
            eqpRunStatus: "2"
          }
        });
      }
      if (params.name == "带病") {
        router.push({
          path: `/all/equip/runManage/record`,
          query: {
            className: "MACHINE",
            eqpRunStatus: "3"
          }
        });
      }
      if (params.name == "离线") {
        router.push({
          path: `/all/equip/runManage/record`,
          query: {
            className: "MACHINE",
            eqpRunStatus: "4"
          }
        });
      }
      if (params.name == "停机") {
        router.push({
          path: `/all/equip/runManage/record`,
          query: {
            className: "MACHINE",
            eqpRunStatus: "5"
          }
        });
      }
      if (params.name == "总报警") {
        router.push({
          path: `/all/alert/business`,
          query: {
            className: "MACHINE",
            startTime: `${year}-${month}-${day} 00:00:00`,
            endTime: `${year}-${month}-${day} 23:59:59`
          }
        });
      }
      if (params.name == "已解决") {
        router.push({
          path: `/all/alert/business`,
          query: {
            className: "MACHINE",
            active: "DONE",
            startTime: `${year}-${month}-${day} 00:00:00`,
            endTime: `${year}-${month}-${day} 23:59:59`
          }
        });
      }
      if (params.name == "待解决") {
        router.push({
          path: `/all/alert/business?className=MACHINE`,
          query: {
            className: "MACHINE",
            startTime: `${year}-${month}-${day} 00:00:00`,
            endTime: `${year}-${month}-${day} 23:59:59`
          }
        });
      }
    });
  }
};
watch(
  () => props.option,
  newOption => {
    if (chartInstance) {
      chartInstance.setOption(newOption);
    }
  }
);
onUnmounted(() => {
  chartInstance && chartInstance.dispose();
  window.removeEventListener("resize", handelResize);
});
</script>

<style scoped lang="scss">
.legendDoms {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 300px;
  background: white;
}
</style>
